@extends('wap.layout.base')
@section('scripts')
    <script>
        let app = new Vue({
            el: '#app',
            data: function() {
                return {
                    title: '登 录',
                    target: "{{ $target }}",
                    form: {
                        username: '',
                        password: '',
                        _token:"{{csrf_token()}}"
                    },
                }
            },
            methods: {
                login() {
                    if(!this.form.username){
                        this.$toast('请输入手机号');return false;
                    }
                    if(!this.form.password){
                        this.$toast('请输入密码');return false;
                    }
                    let that = this;
                    $.post("{{ route('wap.auth.login') }}",this.form,function(res){
                        if(res.code){
                            that.$toast(res.msg);
                        }else{
                            that.$toast.loading({
                                duration: 0,       // 持续展示 toast
                                forbidClick: true, // 禁用背景点击
                                loadingType: 'spinner',
                                message: '登录成功'
                            });
                            setTimeout(function(){
                                that.$toast.clear();
                                window.location.href = res.data;
                            }, 2000);
                        }
                    });
                    return false;
                },
                onClickLeft() {
                    window.location.href = "{{ route('wap.index.index') }}";
                },
                qq_login(){
                    window.location.href = "{{ route('home.qq.login') }}";
                },
                weibo_login(){
                    window.location.href = "{{ route('home.weibo.login') }}";
                }
            }
        });
    </script>
@endsection
@section('content')
    <div class="container main auth login" id="app" v-cloak>
        <div class="row">
            <van-nav-bar
                    :title="title"
                    left-text=""
                    border
                    fixed="true"
                    left-arrow="false"
                    @click-left="onClickLeft">
                <van-icon name="arrow-left" slot="left"/>
            </van-nav-bar>
            <div class="auth-bg"></div>
            <div class="col-xs-12">
                <div class="auth-form">
                    <img class="auth-form-logo" src="{{ $setting['wap_logo'] }}" alt="">
                    <div class="auth-login-menu">
                        <ul>
                            <li class="li-login"><a class="active">登录</a></li>
                            <li class="li-register"><a href="{{ route('wap.auth.register') }}">注册</a></li>
                        </ul>
                    </div>
                    <p><em>*</em>手机号</p>
                    <van-cell-group>
                        <van-field v-model="form.username" placeholder="请输入手机号" />
                    </van-cell-group>
                    <p><em>*</em>密码</p>
                    <van-cell-group>
                        <van-field type="password" v-model="form.password" placeholder="请输入密码" />
                    </van-cell-group>
                    <p class="form-forget">
                        忘记密码？<a href="{{ route('wap.auth.find') }}">立即找回</a>
                    </p>
                    <p class="form-submit">
                        <van-button type="default" @click="login()">登 录</van-button>
                    </p>
                    <div class="form-three">
                        第三方快捷登录
                        <img @click="weibo_login" alt="微博登录" title="微博登录" src="{{ asset('img/login_wb.png') }}" alt="">
                        <img @click="qq_login" class="qq-img" alt="qq登录" title="qq登录" src="{{ asset('img/login_qq.png') }}" alt="">
                    </div>
                </div>
            </div>
        </div>
    </div>
@endsection

